<template>
  <div v-bind:style="{width:width+'px'}">
    <el-container>
      <el-header height="300px">
        <el-col :offset="1">类型</el-col>
        <el-col :span="16" :offset="1" v-for="(Type,index) in MovieType" :key="index+'-a'">
          <el-row v-if="index%10==0" :gutter="20">
            <el-col :span="2" v-if="index==0">
              <el-button
                type="text"
                border-radius:30px
                @click="selectTag.SelType=null;SelectMovieType()"
              >全部</el-button>
            </el-col>
            <el-col :span="2" v-for="(i,Index) in 10" :key="Index+'-b'">
              <el-button
                type="text"
                border-radius:30px
                @click="selectTag.SelType=MovieType[i-1+index];SelectMovieType()"
                v-if="MovieType[i-1+index] != null"
              >{{ MovieType[i-1+index]}}</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :offset="1">国家</el-col>
        <el-col :span="16" :offset="1" v-for="(Type,index) in MovieCon" :key="index+'-c'">
          <el-row v-if="index%10==0" :gutter="20">
            <el-col :span="2" v-if="index==0">
              <el-button
                type="text"
                border-radius:30px
                @click="selectTag.SelCon=null;SelectMovieType()"
              >全部</el-button>
            </el-col>
            <el-col :span="2" v-for="(i,Index) in 10" :key="Index+'-d'">
              <a v-if="MovieCon[i-1+index] != null" style="list-style:none;display:inline">
                <el-button
                  type="text"
                  border-radius:30px
                  @click="selectTag.SelCon=MovieCon[i-1+index];SelectMovieType()"
                >{{ MovieCon[i-1+index]}}</el-button>
              </a>
            </el-col>
          </el-row>
        </el-col>
        <el-col :offset="1">年份</el-col>
        <el-col :span="16" :offset="1" v-for="(Type,index) in MovieYear" :key="index+'-e'">
          <el-row v-if="index%10==0" :gutter="20">
            <el-col :span="2" v-if="index==0">
              <el-button
                type="text"
                border-radius:30px
                @click="selectTag.SelYear=null;SelectMovieType()"
              >全部</el-button>
            </el-col>
            <el-col :span="2" v-for="(i,Index) in 10" :key="Index+'-f'">
              <a v-if="MovieYear[i-1+index] != null" style="list-style:none;display:inline">
                <el-button
                  type="text"
                  border-radius:30px
                  @click="selectTag.SelYear=MovieYear[i-1+index];SelectMovieType()"
                >{{ MovieYear[i-1+index]}}</el-button>
              </a>
            </el-col>
          </el-row>
        </el-col>
      </el-header>
      <el-col :span="22" :offset="1">
        <el-row :gutter="70">
          <el-col :span="1" v-for="(Tags,index) in selectTag" :key="index">
            <el-tag type effect="dark" v-if="Tags!=null">{{Tags}}</el-tag>
          </el-col>
        </el-row>
      </el-col>
      <el-main v-bind:style="{width:width+'px'}" style="bottom: 1%; position: fixed;">
        <el-row :gutter="30">
          <el-col
            :offset="index>0?0:1"
            :span="4"
            v-for="(o, index) in MovieInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            :key="index"
          >
            <el-card :body-style="{ padding: '0px' }" shadow="hover">
              <el-button style="padding:0" @click="SelectMovie(o.MovieID,o.MovieName);drawer = true">
                <img :src="o.MovieImg" class="image" />
                <div style="padding: 14px;">
                  <span>{{o.MovieName}}</span>
                  <div>
                    <el-button type="text" style="float:right">详情</el-button>
                  </div>
                </div>
              </el-button>
            </el-card>
          </el-col>
        </el-row>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="5"
          background
          layout="prev, pager, next"
          :total="MovieInfo.length"
          style="float:right;margin-right:200px;"
        ></el-pagination>
      </el-main>
    </el-container>
    <el-drawer title="电影详情" :visible.sync="drawer" size="40%">
      <MovieInfo :key="id"></MovieInfo>
    </el-drawer>
  </div>
</template>

<script>
import MovieInfo from "@/views/MovieInfo";
export default {
  components: {
    MovieInfo
  },
  data() {
    return {
      MovieIndex: this.$route.query.MovieType,
      MovieInfo: [],
      MovieType: [],
      MovieCon: [],
      MovieYear: [],
      currentPage: 1,
      pagesize: 5,
      width: 0,
      selectTag: {},
      nodata: false,
      drawer: false,
      id: +new Date()
    };
  },
  created() {
    this.width = window.innerWidth - 325;

    this.Ajax.get(
      "api/MovieInfoes/GetMovieInfos?MovieType=" + this.$route.query.MovieType
    ).then(M => {
      this.MovieInfo = M.data;
    });
    this.Ajax.get("api/MovieInfoes/GetMovieType").then(
      T => (this.MovieType = T.data)
    );
    this.Ajax.get("api/MovieInfoes/GetMovieCon").then(
      C => (this.MovieCon = C.data)
    );
    this.Ajax.get("api/MovieInfoes/GetMovieYear").then(
      Y => (this.MovieYear = Y.data)
    );
  },
  methods: {
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    SelectMovie(MovieID,Name) {
      
      this.$store.commit("UpdateMovieID", MovieID);
     this.$store.commit("UpdateMovieName",Name);
      this.id = +new Date();
    },
    SelectMovieType: function() {
      if (this.selectTag.SelType == null) {
        this.selectTag.SelType = "";
      }
      if (this.selectTag.SelYear == null) {
        this.selectTag.SelYear = "";
      }
      if (this.selectTag.SelCon == null) {
        this.selectTag.SelCon = "";
      }
      this.Ajax.post("api/MovieInfoes/GetmovieByType", {
        data: {
          MovieType: this.selectTag.SelType,
          MovieYear: this.selectTag.SelYear,
          MovieCon: this.selectTag.SelCon,
          MovieIndex: this.MovieIndex
        }
      })
        .then(GM => (this.MovieInfo = GM.data))
        .catch(function(error) {
          console.log(error);
        });
      if (this.selectTag.SelType == "") {
        this.selectTag.SelType = null;
      }
      if (this.selectTag.SelYear == "") {
        this.selectTag.SelYear = null;
      }
      if (this.selectTag.SelCon == "") {
        this.selectTag.SelCon = null;
      }
    }
  }
};
</script>
<style >
* {
  padding: 0px;
  margin: 0px;
}
</style>